/**
 * 
 * 绘制按钮
 * 
 */
class DrawBtn extends egret.DisplayObjectContainer {
    /** 获取按钮数据 */
    public btnData;
    /** 保存触摸初始位置 */
    private distance: egret.Point = new egret.Point();
    /** 是否调试中 */
    private isBuild = false;
    /** 保护触摸 false: 关闭保护, true:开启保护. (非手动设置项 */
    private static saveTouch = false;

    public constructor(btnData) {
        super();
        this.btnData = btnData;

        this.once(egret.Event.ADDED_TO_STAGE, this.init, this);
    }

    private init() {

        for (let data of this.btnData) this.createBtn(data);

    }
    /** 创建按钮 */
    private createBtn(data) {
        const shp = new egret.Shape();
        this.addChild(shp);
        shp.graphics.beginFill(0xffffff, 1);
        shp.graphics.drawCircle(0, 0, 20)
        shp.graphics.endFill();
        shp.graphics.beginFill(0xffffff, .3);
        shp.graphics.drawCircle(0, 0, 40)
        shp.graphics.endFill();
        shp.graphics.lineStyle(3, 0xffffff);
        shp.graphics.drawArc(0, 0, 40, 0, Math.PI / 180 * 60, true);
        shp.graphics.endFill();
        shp.x = data.x;
        shp.y = data.y;
        shp.name = data.id;

        egret.Tween.get(shp, { loop: true })
            .to({ rotation: 180, scaleX: .5, scaleY: .5 }, 1000)
            .to({ rotation: 360, scaleX: 1, scaleY: 1 }, 1000);

        shp.touchEnabled = true;
        /** 如果在调试中, 则绑定拖动事件. */
        if (this.isBuild) {
            this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchStart, this);
            return;
        }
        /** 否则绑定单击事件 */
        this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.tapStart, this);
    }
    private tapStart(evt: egret.TouchEvent) {
        evt.stopImmediatePropagation();
        evt.stopPropagation();

        if (evt.target.name == "") return;
        /** 创建遮罩 */
        const mask = new egret.Shape();
        this.stage.addChild(mask);
        mask.graphics.beginFill(0, .3);
        mask.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
        mask.graphics.endFill();
        mask.touchEnabled = true;
        mask.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (evt: egret.TouchEvent) => {
            // console.log("此时的保护状态", DrawBtn.saveTouch);
            /** 触摸保护开启时, 不能继续触摸 */
            if (DrawBtn.saveTouch) return;
            /** 开启触摸保护 */
            DrawBtn.saveTouch = true;
            // console.log("开启保护成功")
            egret.Tween.get(container)
                .to({ y: -this.stage.stageHeight }, 500);
            egret.Tween.get(closeBtn)
                .to({ x: +this.stage.stageWidth, rotation: 90 }, 300)
                .call(closeCallBack);
        }, this);
        /** 创建容器 */
        const container = new egret.Sprite();
        this.stage.addChild(container)
        container.scaleX = .1;
        container.scaleY = .1;
        Utils.anchorCenter(container);
        container.x = this.stage.stageWidth / 2;
        container.y = this.stage.stageHeight / 2;
        container.width = this.stage.stageWidth;
        container.height = this.stage.stageHeight;
        egret.Tween.get(container)
            .to({ scaleX: 1, scaleY: 1 }, 200)
            .to({ scaleX: .9, scaleY: .9 }, 100);
        /** 创建弹图 */
        const alertPanel = Utils.createBitmapByName(`panelBg_png`);
        container.addChild(alertPanel);
        Utils.anchorCenter(alertPanel);
        alertPanel.touchEnabled = true;
        alertPanel.addEventListener(egret.TouchEvent.TOUCH_BEGIN, Utils.superStopPropagation, this);

        /** 创建关闭按钮 */
        const closeBtn = Utils.createBitmapByName("close_png");
        container.addChild(closeBtn);
        Utils.anchorCenter(closeBtn);
        closeBtn.x = alertPanel.x + alertPanel.anchorOffsetX - 100;
        closeBtn.y = alertPanel.y - alertPanel.anchorOffsetY + 100;
        closeBtn.touchEnabled = true;
        closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, btnAnimation, this);
        /** 关闭弹窗 */
        const self = this.stage;
        function closeCallBack(evt: egret.TouchEvent) {
            /** 关闭触摸保护 */
            DrawBtn.saveTouch = false;
            // console.log("关闭保护成功")
            self.removeChild(mask);
            self.removeChild(container);
        }
        /** 关闭按钮动画 */
        function btnAnimation(evt: egret.TouchEvent) {

            egret.Tween.get(container)
                .to({ scaleX: 1.1, scaleY: 1.1 }, 100)
                .to({ scaleX: .1, scaleY: .1 }, 200)
                .call(closeCallBack);

            egret.Tween.get(evt.target)
                .to({ scaleX: .6, scaleY: .6 }, 50)
                .to({ scaleX: 1, scaleY: 1 }, 150)

        }

        /** 获取当前弹窗数据 */
        const nowData = this.btnData.find(obj => obj.id == evt.target.name);
        let totalHeight = 0;
        const baseWidth = container.width * .7;
        function createTxt(data) {
            const txt = new eui.Label();
            txt.text = data;
            txt.width = baseWidth;
            txt.size = 25;
            txt.y = totalHeight + 20;
            txt.textColor = 0x333333;
            txt.lineSpacing = 10;
            totalHeight = txt.height + txt.y;
            groupList.addChild(txt);
        }

        function createTitle(data) {
            const titleTxt = new eui.Label();
            titleTxt.text = data;
            titleTxt.width = baseWidth;
            titleTxt.size = 28;
            titleTxt.bold = true;
            titleTxt.textAlign = "center";
            titleTxt.y = totalHeight + 30;
            titleTxt.textColor = 0x333333;
            totalHeight = titleTxt.height + titleTxt.y;
            groupList.addChild(titleTxt);
        }

        function createImage(data) {
            const image = new eui.Image(RES.getRes(data))
            groupList.addChild(image);
            image.height = baseWidth / (image.width / image.height);
            image.width = baseWidth;
            image.y = totalHeight + 20;
            totalHeight = image.height + image.y;
        }
        /** 创建标题 */
        const title = Utils.createBitmapByName(`title_${evt.target.name}_png`);
        container.addChild(title);
        Utils.anchorCenter(title);
        title.x = alertPanel.x;
        title.y = alertPanel.y - alertPanel.anchorOffsetY + 130;
        /** 创建列表组 */
        const groupList = new eui.Group();
        container.addChild(groupList);
        /** 头图 */
        const image = new eui.Image(RES.getRes(`panel_${evt.target.name}_1_png`))
        groupList.addChild(image);
        image.height = baseWidth / (image.width / image.height);
        image.width = baseWidth;
        totalHeight = image.height;


        createTxt("地址: " + nowData.path);
        // createTxt("电话: " + nowData.tel);

        createTitle("-简介-");
        createTxt(nowData.discription);

        if (nowData.bus != "无") {
            createTitle("-公交路线-");
            createTxt(nowData.bus);
        }

        createImage(`panel_${evt.target.name}_2_png`);

        createTitle("-特色美食-");
        for (const once in nowData.arr) {
            createTxt(nowData.arr[once].title)

            if (nowData.arr[once].path != undefined) createTxt("地址: " + nowData.arr[once].path);
            createImage(`panel_${evt.target.name}_${parseInt(once) + 3}_png`);
            createTxt(nowData.arr[once].discription);
            totalHeight = totalHeight + 80;
        }

        const scrollItem = new eui.Scroller();
        // scrollItem.skinName = "resource/eui_skins/ScrollerSkin.exml"
        scrollItem.width = baseWidth;
        scrollItem.height = container.height * .5;

        Utils.anchorCenter(scrollItem);
        scrollItem.viewport = groupList;

        container.addChild(scrollItem);

    }

    /** 以下均为调试用, 拖动按钮位置的触摸方法 */
    private touchStart(evt: egret.TouchEvent) {
        evt.stopImmediatePropagation();
        evt.stopPropagation();

        this.distance.x = evt.stageX;
        this.distance.y = evt.stageY;

        this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this);
        this.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
    }

    private touchEnd(evt: egret.TouchEvent) {
        evt.stopImmediatePropagation();
        evt.stopPropagation();

        const bufferBtn = this.btnData.find(obj => obj.id == evt.target.name);
        bufferBtn.x = evt.target.x;
        bufferBtn.y = evt.target.y;
        localStorage.setItem("btnPath", JSON.stringify(this.btnData));

        this.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this);

    }

    private touchMove(evt: egret.TouchEvent) {
        evt.stopImmediatePropagation();
        evt.stopPropagation();

        const computedX = evt.stageX - this.distance.x;
        const computedY = evt.stageY - this.distance.y;

        this.distance.x = evt.stageX;
        this.distance.y = evt.stageY;

        evt.target.x += computedX;
        evt.target.y += computedY;
    }

}